<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="个人资料" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="content-item">
				<view class="list-item flex align-center justify-between">
					<view class="lable">头像</view>
					<view class="right flex align-center justify-end" @click="uploadAvatar">
						<u-avatar :src="form.avatar"></u-avatar>
						<u-icon name="arrow-right" color="#717171" size="24" class="arrow-right"></u-icon>
					</view>
				</view>
				<view class="list-item flex align-center justify-between">
					<view class="lable">昵称</view>
					<view class="right flex align-center justify-end">
						<input class="right-input" v-model="form.username" :placeholder="form.username"></input>
						<u-icon name="arrow-right" color="#717171" size="24" class="arrow-right"></u-icon>
					</view>
				</view>
				<view class="list-item flex align-center justify-between">
					<view class="lable">ID</view>
					<view class="right flex align-center justify-end">
						<input class="right-input" disabled="true" v-model="form.id" :placeholder="form.id"></input>
						<u-icon name="arrow-right" color="#717171" size="24" class="arrow-right"></u-icon>
					</view>
				</view>
				<view class="list-item flex align-center justify-between">
					<view class="lable">性别</view>
					<view class="right flex align-center justify-end">
						<input class="right-input" disabled="true" v-model="form.sex" placeholder="请选择"  @click="show_sex = true"></input>
						<u-icon name="arrow-right" color="#717171" size="24" class="arrow-right"></u-icon>
					</view>
				</view>
				<view class="list-item flex align-center justify-between">
					<view class="lable">生日</view>
					<view class="right flex align-center justify-end">
						<input class="right-input" disabled="true" v-model="form.brthday" placeholder="请选择"  @click="show_birthday = true"></input>
						<u-icon name="arrow-right" color="#717171" size="24" class="arrow-right"></u-icon>
					</view>
				</view>
				<navigator url="./setup" hover-class="none" class="list-item flex align-center justify-between">
					<view class="lable">设置</view>
					<view class="right flex align-center justify-end">
						<u-icon name="arrow-right" color="#717171" size="24" class="arrow-right"></u-icon>
					</view>
				</navigator>
			</view>
			<!-- 选择器 -->
			<view class="picker-box">
				<u-select confirm-color="#FFB81E" v-model="show_sex" :list="sex_list" @confirm="sex_confirm"></u-select>
				<u-picker mode="time" v-model="show_birthday" :params="params" @confirm="birthChange"></u-picker>
			</view>
		


		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			form:{
				avatar:"/static/img/custserv_avatar.png",
				username:"玛卡巴卡",
				id:"18989563201",
				sex:"请选择",
				brthday:"请选择"
			},
			sex_list:[
				{
					value: '男',
					label: '男'
				},{
					value: '女',
					label: '女'
				},
			],
			show_sex:false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			show_birthday:false,
		};
	},
	onShow() {
		
	},
	onLoad(e) {},
	methods: {
		sex_confirm(e){
			this.form.sex = e[0]['value']
			//console.log(e);	
		},
		birthChange(e){
			this.form.brthday = e.year + '-' + e.month + '-' + e.day
			console.log(e)
		},
		uploadAvatar(){
			var _this = this
			uni.chooseImage({
				count: 1,
				success: function (res) {
					_this.form.avatar = res.tempFilePaths[0]
					console.log(res.tempFilePaths[0]);
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {

}

.content_box {
	.list-item{
		height: 108rpx;
		border-bottom: 1rpx solid #F7F7F7;
		.lable{
			font-size: 30rpx;
		}
		.arrow-right{
			margin-left: 20rpx;
		}
		.text-tipc{
			color: #717171;
			font-size: 30rpx;
		}
		.right-input{
			text-align: right;
			color: #717171;
			font-size: 30rpx;
		}
	}
}
</style>
